<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component>
            <div slot="footer">底部</div>
            <div>身体</div>
            <!-- 有多个相同名称插槽-方式1-单独写 -->
            <!--
            <div slot="header">头部1</div>
            <div slot="header">头部2</div>
            -->
            <!-- 有多个相同名称插槽-方式2-在最外面的div写
                缺点: 改变dom结构 
            -->
            <!--
            <div slot="header">
                <div>头部1</div>
                <div>头部2</div>
            </div>
            -->
             <!-- 有多个相同名称插槽-方式2-在最外面的template写
                优点: template不产生dom节点
            -->
            <!--
            <template slot="header">
                <div>头部1</div>
                <div>头部2</div>
            </template>
            -->
            <!-- vue2.6以后写法 -->
            <!-- 错误写法,v-slot只能在template上面用 -->
            <!-- <div v-slot:header>头部</div> -->
            <!-- <template v-slot:header>
                <div>头部1</div>
                <div>头部2</div>
            </template> -->
            <!-- 简写 -->
            <template #header>
                <div>头部1</div>
                <div>头部2</div>
            </template>
        </my-component>
    </div>
</body>
<script>
//插槽:把父组件的标签传到子组件    
Vue.component('my-component', {
    template: `
        <div>子组件
            <div>
                <slot name="header"></slot> 
                <slot></slot>
                <slot name="footer"></slot>    
            </div>    
        </div>
    `
})    
let vm = new Vue({
    el: '#app',
    data(){
        return {
        }
    }
})
</script>
</html>